<template>
  <div class="stage">
    <el-row :gutter="10" class="stage-row" style="margin-left: 0px;margin-right: 0px;">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="stage-col">
        <div class="stage-item">
          <div class="stage-item-active">
            <div class="stage-item-top">
              <div class="stage-item-step">1</div>
              <p class="stage-item-tit">{{ $t('home.stage1Step1.tit') }}</p>
              <el-input
                class="stage-item-input"
                v-model="buyKidNum"
                :min="1"
                :placeholder="$t('home.stage1Step1.placeholder')"
              ></el-input>
              <p class="calc">× 100 = {{ buyKidNum * 100 }}</p>
              <ul class="stage-item-caption">
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step1.usdtBalances') }}:<font>{{ asset.b.usdt }}</font>
                </li>
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step1.comment1') }}
                </li>
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step1.comment2') }}
                </li>
              </ul>
            </div>
            <div class="stage-item-bottom">
              <div class="stage-item-btns">
                <div
                  class="button-large button-auth"
                  @click="$approve('usdt', 'kid', buyKidNum * 100)"
                >
                  {{ $t('home.button.auth') }}
                </div>
                <div
                  class="button-large button-info button-buy btn-margin"
                  @click="$buyToken('kid', buyKidNum * 100, true)"
                >
                  <span class="txt">{{ $t('home.button.buy') }}</span>
                  <span class="icon"></span>
                </div>
              </div>
              <div class="stage-item-link">
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="$t('home.stage1Step1.rule')"
                >
                  <el-link
                    slot="reference"
                    class="link"
                    href="javascript:void(0);"
                    style="margin-right: 44px"
                    >{{ $t('home.lookOverRules') }}</el-link
                  >
                </el-popover>
                <el-link class="link" :href="'https://tronscan.org/#/contract/'+$ctr_kid+'/code'" target="_blank"
                  >{{ $t('home.contractAddress') }}</el-link
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    
<!--  3  -->

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="stage-col">
        <div class="stage-item">
          <div class="stage-item-active">
            <div class="stage-item-top">
              <div class="stage-item-step">2</div>
              <p class="stage-item-tit">{{ $t('home.stage1Step3.tit') }}</p>
              <el-input
                class="stage-item-input"
                v-model="kidToKio"
                :placeholder="$t('home.stage1Step3.placeholder')"
              ></el-input>
              <div class="stage-item-handle">
                <el-button @click="$approve('kid', 'kio', kidToKio)"
                  >{{ $t('home.button.auth') }}</el-button
                >
                <el-button @click="$dig('kio', kidToKio, true)"
                  >{{ $t('home.button.mining') }}</el-button
                >
              </div>
              <ul class="stage-item-caption">
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step3.comment1') }}<font>{{ asset.b.kid }}</font>
                </li>
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step3.comment2') }}<font>{{ asset.d.kio }}</font>
                </li>
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step3.comment3') }}<font>{{ asset.g.kio }}</font>
                </li>
              </ul>
            </div>
            <div class="stage-item-bottom">
                    <div class="stage-item-btns" @click="$withdraw('kio')">
                <div
                  class="button-info button-extract button-large"
                  style="justify-content: center"
                
                >
                  <span class="txt">{{ $t('home.button.kioExtract') }}</span>
                  <span class="icon"></span>
                </div>
              </div>

              <!-- <div class="stage-item-btns">
                <div
                  class="button-large button-info button-extract button-extract-kit"
                        @click="$withdrawOfD('kio',true)"
                >
                  <span class="txt">{{ $t('home.button.kitExtract') }}</span>
                  <span class="icon"></span>
                </div>

                <div
                  class="button-large button-info button-extract button-extract-kio btn-margin"
                        @click="$withdraw('kio')">
                  <span class="txt">{{ $t('home.button.kioExtract') }}</span>
                  <span class="icon"></span>
                </div>
              </div> -->

              <div class="stage-item-link">
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="$t('home.stage1Step3.rule')"
                >
                  <el-link
                    slot="reference"
                    class="link"
                    href="javascript:void(0);"
                    style="margin-right: 44px"
                    >{{ $t('home.lookOverRules') }}</el-link
                  >
                </el-popover>
                <el-link class="link" :href="'https://tronscan.org/#/contract/'+$ctr_kio+'/code'" target="_blank"
                  >{{ $t('home.contractAddress') }}</el-link
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="stage-col">
        <div class="stage-item">
          <div class="stage-item-active">
            <div class="stage-item-top">
              <div class="stage-item-step">3</div>
              <p class="stage-item-tit">{{ $t('home.stage1Step4.tit') }}</p>
              <p class="stage-item-mount">{{ asset.oneBonus ? (asset.oneBonus*0.5/100) : 0}} usdt</p>
              <div class="stage-item-handle"></div>
              <p class="stage-item-nums">1{{ $t('home.stage1Step4.drawKioTxt') }}</p>
              <ul class="stage-item-caption">
                <li>
                  <div class="sque"></div>
                  {{ $t('home.stage1Step4.comment1') }}<font>{{ asset.b.kio }}</font>
                </li>
              </ul>
            </div>
            <div class="stage-item-bottom">
              <div class="stage-item-btns">
                <div
                  @click="$approve('kio', 'kid', 1)"
                  class="button-large button-auth"
                >
                  {{ $t('home.button.auth') }}
                </div>
                <div
                  @click="$convert('kid', true)"
                  class="button-large button-info button-exchange btn-margin"
                >
                  <span class="txt">{{ $t('home.button.exchange') }}</span>
                  <span class="icon"></span>
                </div>
              </div>
              <div class="stage-item-link">
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="$t('home.stage1Step4.rule')"
                >
                  <el-link
                    slot="reference"
                    class="link"
                    href="javascript:void(0);"
                    style="margin-right: 44px"
                    >{{ $t('home.lookOverRules') }}</el-link
                  >
                </el-popover>
                <el-link class="link" :href="'https://tronscan.org/#/contract/'+$ctr_kid+'/code'"  target="_blank"
                  >{{ $t('home.contractAddress') }}</el-link
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <popup :alertObj="alertObj" />
  </div>
</template>

<script>
import Popup from '../../components/Popup'

let thiz=null
export default {
  name: 'StageOne',
  components: {
    Popup
  },
  props: {
    asset: {
      type: Object
    },
  },
  data() {
    return {
      buyKidNum: "",
      kidToKit: "",
      kidToKio: "",
      exchangeKio: "",
      kidOfdiging: 0,
      kidOfbalance: 0,
      alertObj:{'isShow':false,'type':'success','message':''}
    }
  },
  mounted(){
    thiz=this;

  },
  methods: {
    approveResp(res) {
      if (res ==true || res.success==true) {
        this.successMsg = '授权成功'
        this.isSuccessShow = true
      } else {
        this.failMsg = '授权失败' + res
        this.isFailShow = true
      }
    },
    buyTokenResp(res) {
      if (res == true) {
        this.successMsg = '购买成功'
        this.isSuccessShow = true
      } else {
        this.failMsg = '购买失败' + res
        this.isFailShow = true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.stage {
  margin: 30px auto 80px;
  height: 600px;
  .stage-item {
    background: #fff;
    box-shadow: 0px 5px 30px 0px rgba(51, 51, 51, 0.1);
    border-radius: 6px;
    overflow: hidden;
    .stage-item-active {
      height: 550px;
    }
    .stage-item-top {
      height: 422px;
      padding-top: 35px;
      .stage-item-step {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        margin: 0 auto;
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 0px 3px 2px rgba(145, 115, 247, 0.35);
        background: linear-gradient(90deg, #9c52ff, #6339f3);
      }
      .stage-item-caption {
        overflow: hidden;
        font-size: 14px;
        color: #999;
        padding: 19px 30px 0 30px;
        li {
          list-style: none;
          padding: 10px 0;
          .sque {
            display: inline-block;
            margin-right: 6px;
            margin-bottom: 3px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #6439f3;
          }
          font {
            float: right;
            font-size: 14px;
            font-weight: 400;
            color: #6439f3;
          }
        }
      }
      .stage-item-tit {
        width: 100%;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
        color: #333333;
        overflow: hidden;
        padding-top: 17px;
        padding-bottom: 35px;
      }
      .stage-item-mount {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #f9305b;
      }
      p.stage-item-nums {
        width: 100%;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        color: #6439f3;
      }
      .stage-item-input {
        display: block;
        margin: 0 auto;
        width: 260px;
        padding-bottom: 12px;
      }
    }
    .stage-item-bottom {
      height: 126px;
      .stage-item-link {
        margin-top: 29px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      .link {
        &:hover {
          color: $hyper-link;
          &:after {
            border-color: $hyper-link;
          }
        }
      }
    }
    .calc {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-top: 10px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .stage-item-btns {
      display: flex;
      justify-content: center;
      padding: 0 20px;
      .btn-margin {
        margin-left: 20px;
      }
    }
    .stage-item-handle {
      padding: 0 20px;
      height: 40px;
      display: flex;
      button {
        color: #6439f3;
        border-color: #6439f3;
      }
    }
  }
}

.button-auth {
  width: 100px;
  color: #fff;
  background-color: $btn-purple;
  border-color: $btn-purple;
}
.button-buy {
  width: 140px;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 106, 0, 1),
    rgba(255, 148, 72, 1)
  );
  .icon {
    background: #ff6b01 url("../../assets/image/shopping-cart.png") no-repeat
      center;
  }
}

.button-extract {
  width: 240px;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(99, 57, 243, 1),
    rgba(156, 82, 255, 1)
  );
  .icon {
    background: #2c00c0 url("../../assets/image/extract.png") no-repeat center;
  }
}

.button-extract-kio,
.button-extract-kit {
  width: 120px;
}

.button-exchange {
  width: 140px;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 106, 0, 1),
    rgba(255, 148, 72, 1)
  );
  .icon {
    background: #ff6b01 url("../../assets/image/exchange.png") no-repeat center;
  }
}

@media screen and (max-width: 767px) {
  .stage {
    padding: 0 10px;
    margin: 20px auto 20px;
    .stage-col {
      margin-bottom: 20px !important;
    }
    .stage-item {
      .stage-item-handle {
        button {
          flex: 1;
        }
      }
      .stage-item-top {
        .stage-item-step {
          width: 50px;
          height: 50px;
          line-height: 50px;
        }
        .stage-item-input {
          padding-bottom: 20px;
        }
        .stage-item-caption {
          padding: 19px 20px 0;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .stage {
    height: auto;
  }
  .stage-item-btns {
    .button-extract, .button-exchange, .button-buy {
      flex: 1 !important;
    }
    .button-auth {
      width: 120px !important;
    }
    .btn-margin {
      margin-left: 15px !important;
    }
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stage {
    height: auto;
    margin: 30px auto 40px;
  }
  .stage-col {
    margin-bottom: 20px;
    &:nth-child(n) {
      padding: 0 10px 0 20px !important;
    }
    &:nth-child(2n) {
      padding: 0 20px 0 10px !important;
    }
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .stage {
    height: auto;
    margin: 30px auto 40px;
  }
  .stage-col {
    margin-bottom: 20px;
    &:nth-child(n) {
      padding: 0 10px 0 20px !important;
    }
    &:nth-child(2n) {
      padding: 0 20px 0 10px !important;
    }
  }
}

@media screen and (min-width: 1200px) {
  .stage {
    width: 1300px;
    display: flex;
    align-items: flex-end;
    .stage-item {
      .stage-item-active {
        transition: height .5s;
        &:hover {
          height: 600px;
          border-radius: 6px;
          border-top-style: solid;
          border-top-width: 20px;
          border-bottom-style: solid;
          border-bottom-width: 10px;
          border-image: linear-gradient(to right, #6339f3, #9c52ff) 10 20;
          transition: height .5s;
        }
      }
    }
  }
  .stage-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
  }
}
</style>